<template>
  <div class="shop-container">
    <header class="shop-hd">
      <!-- 搜索条 -->
      <div class="shop-search min-container clearfix">
        <router-link class="fl logo-small" to="/">
          <img src="../../assets/logo.png" alt="好下单">
        </router-link>
        <!-- <span class="line"></span>
        <div class="fl name"><img class="shop-logo minimg" v-lazy="storeInfo.storeLogo"></div> -->
        <div class="search fr clearfix">
          <input class="form-control fl" type="text" v-model="keyword">
          <w-button type="main fl" @on-click="onSearchAll">搜全站</w-button>
          <w-button type="main fl mine" @on-click="onSearchMine">搜本店</w-button>
        </div>
      </div>
      <!-- 分割线 -->
      <p class="hr"></p>
      <!-- 店铺操作 -->
      <div class="shop-operate app-container">
        <div class="fl name">{{storeInfo.storeName}}</div>
        <w-button-ghost type="default" @on-click="onCollect">{{collectText}}</w-button-ghost>
        <w-button-ghost type="main" @click.native="onContactShop">联系店家</w-button-ghost>
      </div>
    </header>
    <!-- 店铺导航 -->
    <nav class="shop-nav" :style="{'background': `${color}`}">
      <div class="min-container">
        <router-link :to="`/shop/${storeId}`">首页</router-link>
        <a href="javascript:;" @click.stop="onGoAbout(storeId)">商家档案</a>
        <a href="javascript: void(0)" v-for="(nav, index) in navList" :key="index" v-if="nav.isOpen == 0" @click="getNavGoodsList(nav)">{{nav.navigationName}}</a>
      </div>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
  import app from '../../main'
  import { apiFavoriteStore, apiStoreInfo, apiShopNav } from 'js/api'
  import { mapGetters, mapActions } from 'vuex'

  export default {
    data() {
      return {
        navList: [],
        color: '',
        keyword: '',
        storeId: '',
        storeInfo: {},
        collectStatus: false
      }
    },
    created() {
      this.initPage()
    },
    // 监听$router,防止输入了不同的店铺，然后没有渲染页面数据
    watch: {
      $route(to, from) {
        if (to.params.id != from.params.id) {
          this.initPage()
        }
      }
    },
    methods: {
      ...mapActions(['JIMSendSingleMsg']),

      /**
       * 初始化页面的接口及数据
       */
      initPage() {
        // 根据params获取storeid
        this.storeId = this.$route.params.id

        // 店铺id
        if (!this.storeId) {
          this.$toast('缺少参数', () => {
            this.$router.go(-1)
          })
        }

        // 获取店铺基本信息
        apiStoreInfo(this.storeId, this.token).then(data => {
          this.storeInfo = data || {}
          if (this.storeInfo.isCollect == '1') {
            this.collectStatus = '收藏店铺'
          }
        })

        // 获取店铺导航
        apiShopNav(this.storeId).then(data => {
          this.navList = data.VisualNavigationList || []

          // 如果有颜色，则取出来
          if (this.navList && this.navList.length > 0) {
            this.color = this.navList[0].colorStyle
          }

          // 如果长度超过2，并且第一个第二个是首页和商家档案
          if (this.navList.length >= 2) {
            // 第一个是首页的，先干掉
            if (this.navList[0].navigationName == '首页') {
              this.navList.splice(0, 1)
            }

            // 第二个是商家档案的，也干掉（第一个被干掉了，第二个变成第一个了）
            if (this.navList[0].navigationName == '商家档案') {
              this.navList.splice(0, 1)
            }
          }
        })
      },

      // 进入商家店铺，需要采购商权限
      onGoAbout(storeId) {
        const _this = this
        if (!this.token) {
          this.$toast('亲，请先登录', () => {
            this.$router.push(`/login?redirect=/shop/${storeId}/about`)
          })
          return
        }
        this.$store.dispatch('fetchUserRole', {
          token: this.token,
          callback(role) {
            _this.$router.push(`/shop/${storeId}/about`)
            // if (role == 2) {
            //   _this.$router.push(`/shop/${storeId}/about`)
            // } else {
            //   _this.$toast('只有采购商才能查看')
            // }
          }
        })
      },

      /**
       * 收藏和取消店铺
       */
      onCollect() {
        apiFavoriteStore(this.storeId, this.token).then(data => {
          if (data.deleteStatus) {
            this.collectStatus = false
            app.$toast('取消收藏')
          } else {
            this.collectStatus = true
            app.$toast('收藏成功')
          }
        })
      },

      /**
       * 根据导航类型来跳转商品详情页或者商品列表
       *
       * @params { Object } nav 导航对象
       */
      getNavGoodsList(nav) {
        // 如果是后台配置的是链接，直接跳转链接
        if (nav.navigationType == 1) {
          window.location.href = nav.goodsDetailUrl.replace('#/', '') // 去除连接中的#符号
          return
        }
        // 如果是商品
        this.$router.push(`/shop/${this.storeId}/type?type=navigation&navigationId=${nav.id}`)
      },

      // 聊天
      onContactShop() {
        if (!this.$store.getters.token) {
          this.$toast('亲，请先登录', () => {
            this.$router.push('/login')
          })
          return
        }
        const _this = this
        this.$store.dispatch('fetchUserRole', {
          token: this.$store.getters.token,
          callback(role) {
            _this.$store.dispatch('fetchCustomerByStoreId', {
              mobile: _this.$store.getters.mobile,
              storeId: _this.storeId
            })
            // if (role != 2) {
            //   _this.$toast('您不是采购商，只有采购商才可以使用聊天功能')
            // } else {
            //   _this.$store.dispatch('fetchCustomerByStoreId', {
            //     mobile: _this.$store.getters.mobile,
            //     storeId: _this.storeId
            //   })
            // }
          }
        })
      },
      /**
       * 搜索全部
       */
      onSearchAll() {
        // 重置参数
        // this.$store.commit('resetParam')

        // 修改参数
        // this.$store.commit('updateparam', { keyWord: this.keyword })

        // 跳转到搜索详情页面
        this.$router.push(`/search/goods?type=goods&key=${this.keyword}`)
      },
      /**
       * 搜索店铺
       */
      onSearchMine() {
        // 重置参数
        // this.$store.commit('resetParam')

        // 修改参数
        // this.$store.commit('updateparam', { keyWord: this.keyword, storeId: this.storeId })

        // 跳转到搜索详情页面
        this.$router.push(`/search/goods?type=goods&key=${this.keyword}&sid=${this.storeId}`)
      }
    },
    computed: {
      ...mapGetters(['token']),
      collectText() {
        return this.collectStatus ? '取消收藏' : '收藏店铺'
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  @import '../../scss/_mixin.scss';

  .min-container {
    width: 1230px;
  }

  .shop-hd {
    background: #f6f6f6;
    .hr {
      height: 1px;
      background: url('./images/shop_search_boder_bg.png') repeat-x;
    }
  }
  .shop-search {
    padding: 42px 0 30px 0;
    .line {
      background-color: #aaaaaa;
      display: inline-block;
      float: left;
      width: 1px;
      height: 40px;
      margin-top: 6px;
    }
    .name {
      @include curoff(240px);
      color: $color-dark;
      font-size: 15px;
      height: 56px;
      padding-left: 10px;
      line-height: 40px;
      margin-left: 18px;
    }
    .shop-logo {
      display: inline-block;
      width: auto;
      height: 50px;
      vertical-align: top;
    }
    .logo-small {
      width: 208px;
      padding: 0px 66px 0px 20px;
    }
    .search {
      margin-top: 6px;
      .form-control {
        display: inline-block;
        width: 290px;
        height: 30px;
        border-radius: 0;
        border-color: $color-main;
        font-size: 14px;
      }
      .btn {
        width: 90px;
        height: 30px;
        padding: 0;
        border-radius: 0;
      }
      .mine {
        margin-left: 5px;
        background: $color-main-light;
      }
    }
  }
  .shop-operate {
    padding: 20px 0;
    line-height: 30px;
    .btn-ghost {
      width: 110px;
      margin-left: 20px;
      margin-top: 2px;
      height: 30px;
      border-radius: 2px;
      &.default {
        border: 1px solid #999;
        margin-left: 0px;
      }
    }
    .name {
      font-size: 14px;
      width: 246px;
    }
  }
  .shop-nav {
    height: 38px;
    font-size: 0;
    background: url('./images/shop_nav_bg.png') repeat-x;
    a {
      display: inline-block;
      height: 38px;
      line-height: 38px;
      margin-right: 44px;
      font-size: 12px;
      color: $color-white;
      &::last-of-type {
        margin-right: 0;
      }
    }
  }
</style>